
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <%--<link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.12/esri/css/esri.css">--%>
    <link rel="stylesheet" type="text/css" href="static/arcgis3/css/esri.css">
    <%--<link rel="stylesheet" type="text/css" href="//esri.github.io/bootstrap-map-js/dist/css/bootstrapmap.min.css">--%>

    <%--<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">--%>
    <%--<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">--%>

    <!-- Bootstrap样式表 -->
    <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
    <%--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">--%>
    <%--<link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">--%>
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/bootstrapmap.css">


    <!-- /build -->

    <!-- get app/built styles locally -->
    <!-- build:[href] app/resources/main.css -->
    <%--<link rel="stylesheet" href="app/resources/app.css">--%>
    <!-- /build -->

    <style>
        html, body, #mapDiv {
            height: 100%;
            width: 100%;
        }
        .container{
            height: 100%;
            width: 100%;
            padding-left:0px;
            padding-right:0px;
        }
        #HomeButton {
            position: absolute;
            top: 95px;
            left: 20px;
            z-index: 50;
        }

        /*弥补样式*/
        .esriPopupVisible.light .titleButton.close:before, .esriPopupVisible.dark .titleButton.close:before {
            content: "\e806";
        }
    </style>

    <script src="static/js/jquery-1.10.2.min.js"></script>
    <%--<script src="static/arcgis3/js/3.13.js"></script>--%>


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!--加载arcgis for javascript-->
    <%--<script src="//js.arcgis.com/3.13compact"></script>--%>
    <%--<script src="http://js.arcgis.com/3.14/"></script>--%>
    <script src="http://localhost:81/arcgis_js_api3.9/init.js"></script>

    <!--Bootstrap-->
    <script src="/static/Bootstrap/js/bootstrap.js"></script>
    <%--<!-- Include all  plugins or individual files as needed -->--%>
    <%--<script src="static/js/bootstrapmap.js"></script>--%>

</head>
<body  class="claro">
<%--<% System.out.println("Hello world!"); %>--%>

<%--<h2>Hello World!</h2>--%>



<!-- Step 2. Add HTML to define the layout of the page and the map -->
<div class="container ">
    <!--控制台-->
    <div class="panel panel-primary panel-fixed">
        <div class="panel-heading">
            <h3 class="panel-title">控制台</h3>
        </div>
        <div class="panel-body">
            <div class="btn-toolbar">
                <div class="btn-group">
                    <button id="btnStreets" class="btn btn-default">Streets</button>
                    <button id="btnSatellite" class="btn btn-default">Satellite</button>
                    <%--<button id="btnHybrid" class="btn btn-default">Hybrid</button>--%>
                    <%--<button id="btnTopo" class="btn btn-default">Topo</button>--%>
                </div>
            </div>
            <div class="btn-toolbar">
                <div class="btn-group">
                    <%--<button id="btnGray" class="btn btn-default">Gray</button>--%>
                    <%--<button  class="btn btn-default" onclick="GetJsonDataAndDraw();">获取列表</button>--%>
                </div>
            </div>

            <!--实时经纬度-->
            <div  id="divMouseLatLng"  class="btn-toolbar" ></div>
        </div>

    </div>

    <!---搜索栏-->
    <div id="divInfoPanel" class="panel panel-primary panel-fixed" style="display:block;left: 15px;">
        <div class="panel-heading">
            <h4 class="panel-title text-left" style="font-weight:bolder;">查询</h4>
            <button id="chevron" class="btn btn-primary btn-xs btn-absolute">
                <span class="glyphicon glyphicon-chevron-up"></span>
            </button>
        </div>
        <div class="panel-body collapse in" >
            <div class="row" >
                <div class="col-md-12">
                    <div class="input-group">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" onclick="GetJsonDataAndDraw();">查询</button>
                                  </span>
                        <input type="text" class="form-control" placeholder="名称/负责人">
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->

            </div><!-- /.row -->
            <div  class="row" >
                <div class=" panel  ">
                    <!--搜索结果集-->
                    <div  class="panel-body" >
                        <div  class="panel-group " id="accordion" role="tablist" aria-multiselectable="true"
                             style="min-height: 200px;">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingOne">
                                    <h4 class="panel-title text-left">
                                        <img src="static/images/heating/u83.png" alt="" class="img-rounded">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            热源
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                    <div id="divGrid" class="panel-body text-left">

                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingTwo">
                                    <h4 class="panel-title text-left">
                                        <img src="static/images/heating/u87.png" alt="" class="img-rounded">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            换热站
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                    <div class="panel-body text-left">
                                        换热站1
                                        <br/>
                                        换热站2
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!--基本信息框--->
    <div class="panel panel-primary panel-fixed" style="display:block; top:180px;">
        <div class="panel-heading">
            <h3 class="panel-title">信息栏</h3>
        </div>
        <div class="panel-body" >
            <!-- Nav tabs -->
            <ul class="nav nav-tabs myTabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#infopanel_tab_content_1" aria-controls="window_tab_content_1" role="tab" data-toggle="tab">基本信息</a>
                </li>
                <li role="presentation">
                    <a href="#infopanel_tab_content_2" aria-controls="window_tab_content_2" role="tab" data-toggle="tab">监测信息</a>
                </li>
                <li role="presentation">
                    <a href="#infopanel_tab_content_3" aria-controls="window_tab_content_3" role="tab" data-toggle="tab">监测图</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="infopanel_tab_content_1">
                    基本信息...</div>
                <div role="tabpanel" class="tab-pane" id="infopanel_tab_content_2">监测信息...</div>
                <div role="tabpanel" class="tab-pane" id="infopanel_tab_content_3">监测图...</div>
            </div>
        </div>


    </div>




    <!--地图容器-->
    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:false"
         style="width: 100%; height: 100%; margin: 0;">

        <div id="mapDiv"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'center'"
             style="padding:0">
            <div id="HomeButton"></div>
        </div>

    </div>



</div>

<!--弹出框--->
<!-- Modal -->
<div  id="divInfoWindow" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">基本信息</h4>
            </div>
            <div class="modal-body">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs myTabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#window_tab_content_1" aria-controls="window_tab_content_1" role="tab" data-toggle="tab">基本信息</a>
                    </li>
                    <li role="presentation">
                        <a href="#window_tab_content_2" aria-controls="window_tab_content_2" role="tab" data-toggle="tab">监测信息</a>
                    </li>
                    <li role="presentation">
                        <a href="#window_tab_content_3" aria-controls="window_tab_content_3" role="tab" data-toggle="tab">监测图</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="window_tab_content_1">
                        基本信息...</div>
                    <div role="tabpanel" class="tab-pane" id="window_tab_content_2">监测信息...</div>
                    <div role="tabpanel" class="tab-pane" id="window_tab_content_3">监测图...</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <%--<button type="button" class="btn btn-primary">Save changes</button>--%>
            </div>
        </div>
    </div>
</div>

<!-- Step 3. Add JS to load the responsive map -->
<script type="text/javascript">
    var package_path = "//esri.github.com/bootstrap-map-js/src/js";
    var dojoConfig = {
        packages: [{
            name: "application",
            location: package_path
        }]
    };
</script>


<!--
<script>
    require(["esri/map",
                "dojo/on",
                "dojo/dom",
                "dojo/domReady!"],
            function(Map, on, dom) {
                // Create map
                var map = new Map("mapDiv",{
                    basemap: "streets",
                    center: [-122.69, 45.52],
                    zoom: 3
                });

                // Wire UI Events
                on(dom.byId("btnStreets"),"click", function() {
                    map.setBasemap("streets");
                });
                on(dom.byId("btnSatellite"),"click", function() {
                    map.setBasemap("satellite");
                });
                on(dom.byId("btnHybrid"),"click", function() {
                    map.setBasemap("hybrid");
                });
                on(dom.byId("btnTopo"),"click", function() {
                    map.setBasemap("topo");
                });
                on(dom.byId("btnGray"),"click", function() {
                    map.setBasemap("gray");
                });
                on(dom.byId("btnNatGeo"),"click", function() {
                    map.setBasemap("national-geographic");
                });
            });
</script>
-->
<script>

    var map=null;
    //配置贴片底图'http://{s}.tile.osm.org/{z}/{x}/{y}.png',  '../MapTiles/GoogleMapTiles/{z}/{y}/{x}_{y}.png'
    //var tilePartUrl = "../MapTiles";
    //高德地图http://webrd04.is.autonavi.com/appmaptile?lang=zh_en&size=1&scale=1&style=8&x=6864&y=3347&z=13
    //高德地图中文http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=13&y=6&z=4
    //高德卫星地图http://webst02.is.autonavi.com/appmaptile?style=6&x=56&y=25&z=6
    var tilePartUrl = "http://";
    //var tilePartUrl = "http://localhost/MapTilesServices";

//    //获取地图瓦片服务器编号,根据x值取余数
//    function GetMapTileServiceNum(para) {
//        //var randomNum = Math.floor(Math.random() * 10) % 4 + 1;
//        var randomNum = para.x % 4 + 1;
//        return "" + randomNum;
//    }

    require(["esri/map",
                "dojo/on",
                "dojo/dom",
                "esri/dijit/Basemap",
                "esri/layers/WebTiledLayer",
                "esri/dijit/HomeButton",
                "esri/arcgis/utils", //工具
//                "esri/dijit/LayerList", //图层列表
                "esri/dijit/OverviewMap",
                "esri/dijit/Scalebar",
                "dojo/parser",

                "esri/dijit/InfoWindow",
                "esri/dijit/InfoWindowLite",
                "dijit/layout/BorderContainer",
                "dijit/layout/ContentPane",
                "dojo/domReady!"
            ],
            function(Map,
                     on, dom,
                     Basemap,
                     WebTiledLayer, HomeButton,
                     arcgisUtils,
                     //LayerList
                     OverviewMap,
                     Scalebar,
                     parser
                    ) {
                parser.parse();

                // Create map
                map = new Map("mapDiv",{
                    //basemap: "gray",  // Do not specify default basemap
                    //center: [116, 40],
                    center:[125.319823,43.927496],
                    zoom: 14,
                    maxZoom:18,
                    minZoom:3
                });

                // Setup references for tile layer
//                var url = "http://{subDomain}.tile.stamen.com/watercolor/{level}/{col}/{row}.jpg";
                var wtl = WebTiledLayer;
                var url1 = tilePartUrl + 'webrd0{subDomain}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={col}&y={row}&z={level}';
                var lyr1 = new wtl(url1, {
                    "copyright": "高德默认地图",
                    "id": "StreetAutonavi",
                    "subDomains": ["1", "2", "3","4"]
                });
                /*var baseMapLayer1 =*/
                map.addLayer(lyr1);

                var url2 = tilePartUrl + 'webst0{subDomain}.is.autonavi.com/appmaptile?&style=6&x={col}&y={row}&z={level}';
                var lyr2 = new wtl(url2, {
                    "copyright": "高德卫星地图",
                    "id": "SatelliteAutonavi",
                    "subDomains": ["1", "2", "3","4"],
                    "visible":false
                });
                map.addLayer(lyr2);

                //BaseMap
//                var autonaviBasemap = new Basemap({
//                    layers: [lyr1,lyr2],
//                    title: "AutonaviMap"
//                    //thumbnailUrl:"images/waterThumb.png"
//                });
//                map.addLayer(autonaviBasemap);

                // Wire UI Events
                on(dom.byId("btnStreets"),"click", function() {
                    //map.setBasemap("StreetAutonavi");
                    lyr1.show();
                    lyr2.hide();
                });
                on(dom.byId("btnSatellite"),"click", function() {
                    //map.setBasemap("SatelliteAutonavi");
                    lyr2.show();
                    lyr1.hide();
                });

                //
//                on(map,"onMouseMove",function(){
//
//                });

                //比例尺
                var scalebar = new Scalebar({
                    map: map,
                    // "dual" displays both miles and kilmometers
                    // "english" is the default, which displays miles
                    // use "metric" for kilometers
                    scalebarUnit: "dual"
                });
                //鹰眼
                var overviewMapDijit = new OverviewMap({
                    map: map,
                    visible: true,           // 初始化可见，默认为false
                    attachTo: "bottom-right",   // 默认右上角
                    width: 250,              // 默认值是地图高度的 1/4th
                    height: 150,             // 默认值是地图高度的 1/4th
                    opacity: 0.5,            // 透明度 默认0.5
                    maximizeButton: true,    // 最大化,最小化按钮，默认false
                    expandFactor: 2,         //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2，这意味着概览地图将至少是两倍的大小的程度矩形。
                    color: "#000000"     // 默认颜色为#000000
                    //baseLayer:lyr1
                });
                overviewMapDijit.startup();

                //Home图标
                var home = new HomeButton({
                    map: map
                }, "HomeButton");
                home.startup();

//                var myWidget = new LayerList({
//                    map: map,
//                    //layers: arcgisUtils.getLayerList(response)
//                    layers:[lyr1,lyr2]
//                },"layerList");
//                myWidget.startup();

                dojo.connect(map,"onClick",function(ext){
//                    point = map.toScreen(mapPoint);//经纬转屏幕
//                    mapPoint = map.toMap(screenPoint);//屏幕转经纬
//                    map.centerAndZoom(mapPoint,levelOrFactor);//根据经纬度和地图层级定位居中

                    var jqDiv=$("#divMouseLatLng");
                    jqDiv.html("经纬度:"+ext.mapPoint.getLongitude().toFixed(6)+","+ext.mapPoint.getLatitude().toFixed(6));
                });
//                map.on("mouse-out",function(mouseEvent){
//                    var jqDiv=$("#divMouseLatLng");
//                    jqDiv.html("");
//                });

//                //地图上空白处点击,隐藏弹出信息框
//                dojo.connect(map,"onClick",function(ext){
//                    if (map.infoWindow && map.infoWindow.isShowing) {
//                        map.infoWindow.hide();
//                    }
//                });
            }
    );
</script>

<script>
    //信息layer
    var layerForListInfo=null;

    //程序入口
    dojo.addOnLoad(function(){


        InitDrawGraphics();

        //bootstrap tab绑定事件
        $('.myTabs a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        });

        //搜索框按钮事件绑定
        // Toggle panel
        $("#chevron").click(function(e){
            $("#divInfoPanel > .panel-body").toggleClass("in");
//            var jqPanelBody=$("#divInfoPanel > .panel-body");
            var jqglyphicon=$(".glyphicon");
            jqglyphicon.toggleClass("glyphicon-chevron-down","glyphicon-chevron-up");
//            if (jqglyphicon.hasClass("glyphicon-chevron-up")) {
//                jqglyphicon.replaceClass("glyphicon-chevron-down","glyphicon-chevron-up");
//                jqPanelBody.removeClass("in");
//            } else {
//                jqglyphicon.replaceClass("glyphicon-chevron-up","glyphicon-chevron-down");
//                jqPanelBody.addClass("in");
//            }
        });

    });

    //画Graphics
    var markerSymbols={};
    function InitDrawGraphics(){
        require([
            "esri/map",
            "esri/layers/GraphicsLayer",
            "esri/toolbars/draw",
            "esri/InfoTemplate",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/PictureFillSymbol",
            "esri/symbols/CartographicLineSymbol",
            "esri/graphic",
            "esri/Color",
            "esri/geometry/Point",
            "dojo/dom",
            "dojo/query",
            "dojo/on",
            "dojo/domReady!"
        ],function(Map,
                   GraphicsLayer, Draw,
                   InfoTemplate,
                   SimpleMarkerSymbol, SimpleLineSymbol,
                   PictureMarkerSymbol,
                   PictureFillSymbol, CartographicLineSymbol,
                   Graphic,
                   Color,
                   Point,
                   dom, query,on
                ){
            //// markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
//            var markerSymbol = new SimpleMarkerSymbol();
//            markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
//            markerSymbol.setColor(new Color("#00FFFF"));

            var imageUrl1="/static/arcgis3/dijit/images/Directions/bluePoint.png";
            var imageUrl2="/static/arcgis3/dijit/images/Directions/greenPoint.png";
            var imageUrl3="/static/arcgis3/dijit/images/Directions/redPoint.png";
            var markerSymbol =  new PictureMarkerSymbol({
                "url":imageUrl1,
                "height":29,
                "width":21
//                "xoffset":0,
//                "yoffset":29
                //"type":"esriPMS"
                //"angle": -30
            });
            markerSymbols.markerSymbolBlue=markerSymbol;
            markerSymbols.markerSymbolGreen=dojo.clone(markerSymbol).setUrl(imageUrl2);
            markerSymbols.markerSymbolRed=dojo.clone(markerSymbol).setUrl(imageUrl3);

            // lineSymbol used for freehand polyline, polyline and line.
            var lineSymbol = new CartographicLineSymbol(
                    CartographicLineSymbol.STYLE_SOLID,
                    new Color([255,0,0]), 10,
                    CartographicLineSymbol.CAP_ROUND,
                    CartographicLineSymbol.JOIN_MITER, 5
            );

            // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
            // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
            var fillSymbol = new PictureFillSymbol(
                    "images/mangrove.png",
                    new SimpleLineSymbol(
                            SimpleLineSymbol.STYLE_SOLID,
                            new Color('#000'),
                            1
                    ),
                    42,
                    42
            );

//        var gLayer=new esri.layers.GraphicsLayer();
            var gLayer=new GraphicsLayer();
            //画点
            drawMarkers(gLayer);

            map.addLayer(gLayer);

            //信息图层的Layer
            layerForListInfo=new GraphicsLayer();
            map.addLayer(layerForListInfo);



        });

    }


    function drawMarkers(gLayer){
//        var point=new Point(-118.15, 33.80, new SpatialReference({ wkid: 4326 }));
        var point=new esri.geometry.Point(115.649414,39.349191);
        var g=new esri.Graphic(point, markerSymbols.markerSymbolBlue);

        //point.setInfoTemplate(new esri.InfoTemplate("Census Block: ${TRACT}/${BLOCK}", "Pop. in 2000: ${POP2000}"));
        g.setInfoTemplate(new esri.InfoTemplate("标记点","蓝色图元"));

        gLayer.add(g);

//        point=new esri.geometry.Point(118.15, 38);
//        gLayer.add(new esri.Graphic(point, symbol));
    }

    //获取JSON数据并展示
    function GetJsonDataAndDraw(keyword){
        //var jsonData=
        var requestData={};
        $.ajax({
            url: "static/appdata/ListHeatingData.json",
            data:requestData,
            cache: false,
            type:"GET",
            success: function(data){
                //alert(JSON.stringify(data));
                if(data.success==true){
                    //弹出列表框
                    ShowInfoGrid(data);
                    //绘制图元
                    ShowMarkers(data);
                }
            }
        });


    }
    //信息列表框
    function ShowInfoGrid(data){
        var jqdivInfoPanel=$("#divInfoPanel");
        var jqDivGrid=$("#divGrid");
        jqDivGrid.children().remove();
        //jqDivGrid.append("呵呵");
        jqdivInfoPanel.show();

        //热源
        var htmlContent="";
        htmlContent+='<ul class="list-group">';
        $.each(data.data,function(index,item){
            var aLink='<a href="javascript:LocateAndShowMarker('+item.id+')">'+item.name+'</a>';
            htmlContent+='<li class="list-group-item">'+aLink+'</li>';
        });
        htmlContent+='</ul>';
        jqDivGrid.append(htmlContent);
    }
    //展示图元
    function ShowMarkers(data){
        //清理
        //gLayerForListInfo.graphics().remove();
        if(data && data.data){
            $.each(data.data,function(index,item){
                layerForListInfo.add(GetInfoMarker(item));
            });
        }
    }
    //信息图元
    function GetInfoMarker(data){
        var point=new esri.geometry.Point(data.lat,data.lng);
        var symbol=markerSymbols.markerSymbolBlue;
        if(data.type==2){
            symbol=markerSymbols.markerSymbolGreen;
        }
        else if(data.type==3){
            symbol=markerSymbols.markerSymbolRed;
        }
        var g=new esri.Graphic(point, symbol);
        //g.optionData= dojo.clone(data);
//        g.setAttributes({"title":data.title});
        g.setAttributes(dojo.clone(data));

        //point.setInfoTemplate(new esri.InfoTemplate("Census Block: ${TRACT}/${BLOCK}", "Pop. in 2000: ${POP2000}"));
        //g.setInfoTemplate(new esri.InfoTemplate(data.title,data.title));
        var infoTemplate = new esri.InfoTemplate("${title}", data.title);
        g.setInfoTemplate(infoTemplate);

        return g;
    }

    //定位图元
    function LocateAndShowMarker(id){
        //在地图上查找
        $.each(layerForListInfo.graphics,function(index,item){
            if(item.attributes.id==id){
                //地图居中，弹出info
                map.centerAndZoom(item.geometry);
                item.show();
                //item.getNode().click();
                //item.showInfoWindowOnClick();
                //弹出图元信息框,（没有找到好的解决办法）
                //map.setInfoWindow(item.getInfoTemplate());
                //DrawInfoWindowForMarker(item.attributes);

                //弹出模态窗口
                ShowWindowModel();

                return true;
            }
        });


    }

    //绘制信息弹出框
    function DrawInfoWindowForMarker(data){
        //经纬度
        var p=new esri.geometry.Point(data.lat,data.lng);
//        var infoWindow = new esri.dijit.InfoWindowLite({coords:p}, dojo.create("div"));
//        infoWindow.startup();
//        map.setInfoWindow(infoWindow);

        // Setup popup
        //setPopup(map, "top", dom.byId("popXoffset").value, dom.byId("popYoffset").value);
        setPopup(map, "top",0,-10);

        if (map.infoWindow.isShowing) {
            map.infoWindow.show(pt);
        }

        function setPopup(map,anchorPos,xOffset,yOffset) {
            var popup  = map.infoWindow;
            popup.highlight = false;
            popup.set("anchor", anchorPos);
            popup.domNode.style.marginLeft = xOffset+"px";
            popup.domNode.style.marginTop = yOffset+"px";
        }
    }

    //弹出框
    function ShowWindowModel(){
        //弹出框模态框
//        $('#divInfoWindow').on('shown.bs.modal', function () {
//            //$('#myInput').focus()
//        });

        $('#divInfoWindow').modal('show');

    }


</script>


</body>
</html>
